import { useState } from 'react';

type Appt = { id: string; patient: string; dept: string; time: string; status: '待诊' | '进行中' | '完成' };

const initial: Appt[] = [
  { id: 'A001', patient: '张三', dept: '内科', time: '09:00', status: '待诊' },
  { id: 'A002', patient: '李四', dept: '内科', time: '09:20', status: '待诊' },
  { id: 'A003', patient: '王五', dept: '内科', time: '09:40', status: '进行中' },
];

export default function ProviderAppointments() {
  const [list, setList] = useState<Appt[]>(initial);

  function update(id: string, status: Appt['status']) {
    setList(prev => prev.map(a => a.id === id ? { ...a, status } : a));
  }

  return (
    <div className="space-y-3 px-4 pb-20">
      {list.map(a => (
        <div key={a.id} className="rounded-2xl bg-white p-4 shadow-sm">
          <div className="flex items-center justify-between text-sm">
            <div>
              <div className="font-medium text-gray-900">{a.patient} · {a.dept}</div>
              <div className="text-gray-600">{a.time} · 单号 {a.id}</div>
            </div>
            <span className={`rounded-full px-2 py-1 text-xs ${badge(a.status)}`}>{a.status}</span>
          </div>
          <div className="mt-3 flex gap-2 text-sm">
            <button className="rounded-xl border px-3 py-2" onClick={() => update(a.id, '进行中')}>开始就诊</button>
            <button className="rounded-xl border px-3 py-2" onClick={() => update(a.id, '完成')}>标记完成</button>
          </div>
        </div>
      ))}
    </div>
  );
}

function badge(s: Appt['status']) {
  if (s === '进行中') return 'bg-brand-50 text-brand-700';
  if (s === '完成') return 'bg-gray-100 text-gray-700';
  return 'bg-orange-50 text-orange-700';
}


